<template>
    <div
        v-if="reminder"
        style="background: #fcf6e6;border: 1px solid #e7decc;padding: 10px 10px;"
        class="alignCenter"
    >
        <div class="boxTop">
            <div class="top flex">
                <i :class="icon ? icon : 'el-icon-warning'"></i>
                <span style="margin-left: 5px;font-weight:bold;">{{ title }}</span>
            </div>
            <div
                style="font-size: 12px;margin-left:20px;line-height: 18px;">
                <div style="white-space: pre;" v-html="content"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'reminder',
    model: {
        prop: 'value',
        event: 'tipContentChange'
    },
    props: ['value', 'title', 'content', 'icon','reminder'],
    watch: {
        reminder: {
            handler (v) {
            },
            deep: true,
            immediate: true
        },
        content: {
            handler (val) {
                this.$emit('tipContentChange', val)
            },
            deep: true,
            immediate: true
        }
    },
    data () {
        return {}
    }
}
</script>

<style lang='less' scoped>
.el-icon-warning:before {
    font-size: 20px;
    color: #edad4a;
}

.boxTop {
    width: 94%;

    .top {
        align-items: center;
    }
}
</style>
